
import 'package:flutter/material.dart';
import 'package:flutter_analog_clock/flutter_analog_clock.dart';
import 'package:shimmer/shimmer.dart';
import 'package:syria_sports/core/app_export.dart';
import 'package:shimmer_pro/shimmer_pro.dart';


class CPLoadingWidget extends StatelessWidget {
  const CPLoadingWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ThemeBloc,ThemeState>(
      builder:(context , state)=> Expanded(
        child: SingleChildScrollView(
          child: Column(
            children: [
              Stack(
                children: [
                  Container(
                    height: 200,
                    margin:const EdgeInsets.symmetric(vertical: 4,horizontal: 8),
                    decoration: BoxDecoration(
                        image: DecorationImage(
                          image:Image.asset(ImageConstant.imgLogo).image,
                        )
                    ),
                  ),
                  Shimmer.fromColors(
                    baseColor: Theme.of(context).colorScheme.onPrimaryContainer.withOpacity(.85),
                    highlightColor: theme.textTheme.titleMedium?.color?.withOpacity(.01)??Colors.black26,
                    child: Card(
                      color: Colors.white,
                      margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                      child: Container(
                        height: 200,
                      ),
                    ),
                  ),
                ],
              ),
              Stack(
                children: [
                  Row(
                    children: [
                      Expanded(
                        flex: 2,
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 4.0),
                          child: Card(
                            color: Theme.of(context).colorScheme.secondary,
                            child: SizedBox(
                              height: 150,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.spaceAround,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                                    children: [
                                      Text(
                                          'الحضور',
                                          style: theme.textTheme.titleLarge
                                      ),
                                      CustomImageView(
                                        imagePath: ImageConstant.imgPlayerGym,
                                        height: 32.adaptSize,
                                        width: 32.adaptSize,
                                      ),
                                    ],
                                  ),
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                                    children: [
                                      Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: Column(
                                          children: [
                                            const Text(
                                                '',
                                                style: TextStyle(
                                                    color: Colors.deepOrange,
                                                    fontSize: 32
                                                )
                                            ),
                                            Text(
                                                'متدرب',
                                                style: theme.textTheme.titleMedium
                                            ),
                                          ],
                                        ),
                                      ),
                                      IconButton(
                                        onPressed: (){},
                                        icon: CustomImageView(
                                          imagePath: ImageConstant.icNoteAdd,
                                          color: Colors.deepOrange,
                                          height: 32.adaptSize,
                                          width: 32.adaptSize,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ),
                        ),
                      ),
                      Expanded(
                        flex: 2,
                        child: Card(
                          color: Colors.transparent,
                          child: Container(
                            height: 150,
                            padding:const EdgeInsets.all(4),
                            child: AnalogClock.dark(dialColor: Theme.of(context).colorScheme.onPrimaryContainer),
                          ),
                        ),
                      ),
                      // Card(),
                    ],
                  ),
                  Row(
                    children: [
                      Expanded(
                        flex: 2,
                        child: Shimmer.fromColors(
                        baseColor: Theme.of(context).colorScheme.onPrimaryContainer.withOpacity(.85),
                        highlightColor: theme.textTheme.titleMedium?.color?.withOpacity(.01)??Colors.black26,
                        child: Card(
                          color: Colors.white,
                          margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                          child: Container(
                            height: 150,
                          ),
                        ),
                                                ),
                      ),
                      Expanded(
                        flex: 2,
                        child: Shimmer.fromColors(
                        baseColor: Theme.of(context).colorScheme.onPrimaryContainer.withOpacity(.85),
                        highlightColor: theme.textTheme.titleMedium?.color?.withOpacity(.01)??Colors.black26,
                        child: Card(
                          color: Colors.white,
                          margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                          child: Container(
                            height: 150,
                          ),
                        ),
                                                ),
                      ),
                    ],
                  ),
                ],
              ),

              Padding(
                padding: const EdgeInsets.symmetric(vertical: 0.0,horizontal: 8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text('اليوم:',style: theme.textTheme.titleMedium),
                    TextButton(
                        onPressed: (){},
                        child: Text('',style: theme.textTheme.titleSmall))
                  ],
                ),
              ),

                Column(
                children: List.generate(4, (index) => Shimmer.fromColors(
                  baseColor: Theme.of(context).colorScheme.onPrimaryContainer.withOpacity(.75),
                  highlightColor: theme.textTheme.titleMedium?.color?.withOpacity(.01)??Colors.black26,
                  child: Card(
                    color: Theme.of(context).colorScheme.onPrimaryContainer,
                    child: ListTile(
                      contentPadding: const EdgeInsets.all(4),
                      onTap: () {},
                      leading: CircleAvatar(
                        radius: 24,
                        backgroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
                      ),
                      title: Container(
                        width: 100,
                        height: 16,
                        color: Theme.of(context).colorScheme.onPrimaryContainer,
                      ),
                      subtitle: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const SizedBox(height: 8),
                          Container(
                            width: 80,
                            height: 14,
                            color: Theme.of(context).colorScheme.onPrimaryContainer,
                          ),
                          Container(
                            width: 100,
                            height: 14,
                            color: Theme.of(context).colorScheme.onPrimaryContainer,
                          ),
                        ],
                      ),
                      trailing: Container(
                        width: 32,
                        height: 32,
                        color: Theme.of(context).colorScheme.onPrimaryContainer,
                      ),
                    ),
                  ),
                )),
              ),
              const SizedBox(height: 32),
            ],
          ),
        ),
      ),
    );
  }
}
